// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'


import HelloCls from './component/HelloCla'

// 引入css文件
import "./index.css"


// 有状态组件和无状态组件
// 函数组件又叫做无状态组件 类组件又做作有状态组件
// 状态(state) 即数据
//函数组件没有自己的状态,只负责数据展示(静态)
//类组件有自己的状态,负责更新UI 让页面 "动" 起来

// function App() {
//     function handlerClick(e) {
//         e.preventDefault();
//         //阻止浏览器 默认行为
//         alert('这是单击处理程序')
//     }
//     return (
//         <a href="http://wwww.baidu.com" onClick={handlerClick} >点我</a>
//     )
// }


//setState()修改状态
//状态可变的
//语法: this.setState({要修改的数据})
//注意: 不要直接修改state中的值 这是错误的
//setState() 作用:1.修改state 2.更新UI
//思想:数据驱动视图

class MyState extends React.Component {
    // constructor(){
    //     super()
    //     // 初始化 state
    //     this.state={
    //         count:0,
    //         name:"张三",
    //         age:25
    //     }
    // }
    constructor() {
        super()
        this.hanlderSub = this.hanlderSub.bind(this)
        this.state = {
            count: 2,
            name: "张三",
            age: 24
        }
    }

    //简化
    // state = {
    //     count: 2,
    //     name: "张三",
    //     age: 24
    // }
    // 事件处理程序的this 值为 undefined
    //解决方式一 箭头函数 利用箭头自身不绑定this的特点
    //解决方式二 在construct构建方法初始化的时候 this绑定 事件处理程序
    //解决方式二 事件程序直接使用箭头函数定义
    // 推荐使用第三种
    hanlderAdd() {
        console.log('事件处理程序==>this')
        console.log(this)
        this.setState({ count: this.state.count + 1 })
    }
    hanlderSub() {
        this.setState({ count: this.state.count - 1 })
    }
    hanlderAddAdd = () => {
        this.setState({ count: this.state.count + 2 })
    }

    render() {
        return (
            <div>
                这是有状态组件 {this.state.name}
                <br />
                这是一个计数器 {this.state.count}
                <br />
                <button onClick={() => this.hanlderAdd()}>加一</button>
                <button onClick={this.hanlderSub}>减一</button>
                <button onClick={this.hanlderAddAdd}>加二</button>
                {/* JSX 内部嵌套事件处理程序 this (不推荐使用) */}
                {/* <button onClick={() => {
                    this.setState({
                        count: this.state.count +1
                    })
                }}>加一</button>
                <button onClick={() => {
                    this.setState({
                        count: this.state.count -1
                    })
                }}>减一</button> */}

            </div>
        )
    }
}


// state的基本使用
// 状态即数据
//状态是私有的 只能在组件内部使用




//3 渲染react元素
ReactDOM.render(<MyState />, document.getElementById('root'))
